<template>
    <div class="card-box leadingSecond">
        <div>
            <el-tabs v-model="activeName" >
                <el-tab-pane :label="`总共添加(${tableDataInfo.excelRowNumRight})`" name="first">
                    <el-table :data="tableData" v-if="clientType==='provider'">
                        <el-table-column align="center" prop="clientProviderName" label="供应客户名称"></el-table-column>
                        <el-table-column align="center" prop="clientProviderType" label="供应客户类型">
                            <template slot-scope="scope">{{scope.row.clientProviderType | dict('provider_type')}}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="certificateType" label="证件类型">
                            <template slot-scope="scope">{{scope.row.certificateType | dict('commercial_certificate_type')}}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="certificateNum" label="证件号码"></el-table-column>
                        <el-table-column align="center" prop="providerPrincipal" label="供应商负责人"></el-table-column>
                        <el-table-column align="center" prop="telephone" label="固定电话"></el-table-column>
                        <el-table-column align="center" prop="scopeBusiness" label="业务范围"></el-table-column>
                        <el-table-column align="center" prop="phoneNum" label="联系电话"></el-table-column>
                        <el-table-column align="center" prop="email" label="电子邮件"></el-table-column>
                        <el-table-column align="center" prop="address" label="通讯地址"></el-table-column>
                        <el-table-column align="center" prop="introduceUnit" label="引进单位"></el-table-column>
                        <el-table-column align="center" prop="remarks" label="备注"></el-table-column>
                        <el-table-column align="center" prop="name" label="联系人姓名"></el-table-column>
                        <el-table-column align="center" prop="phone" label="联系人手机号"></el-table-column>
                        <el-table-column align="center" prop="infoEmail" label="联系人电子邮箱"></el-table-column>
                        <el-table-column align="center" prop="infoRemarks" label="联系人备注"></el-table-column>
                    </el-table>
                    <el-table :data="tableData" v-else>
                        <el-table-column align="center" prop="lessorName" label="出租方名称"></el-table-column>
                        <el-table-column align="center" prop="lessorType" label="出租方类型">
                            <template slot-scope="scope">{{scope.row.lessorType | dict('lessee_type')}}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="certificateType" label="证件类型">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.lessorType == '0' ">{{scope.row.certificateType | dict('personage_certificate_type')}}</span>
                                <span v-else>{{scope.row.certificateType | dict('commercial_certificate_type')}}</span></template>
                        </el-table-column>
                        <el-table-column align="center" prop="certificateNum" label="证件号码"></el-table-column>
                        <el-table-column align="center" prop="address" label="通讯地址"></el-table-column>
                        <el-table-column align="center" prop="remarks" label="备注"></el-table-column>
                        <el-table-column align="center" prop="name" label="联系人姓名"></el-table-column>
                        <el-table-column align="center" prop="phone" label="联系人手机号"></el-table-column>
                        <el-table-column align="center" prop="department" label="联系人部门"></el-table-column>
                        <el-table-column align="center" prop="job" label="联系人职务"></el-table-column>
                    <!--    <el-table-column align="center" prop="identityCard" label="联系人证件号码"></el-table-column>-->
<!--                        <el-table-column align="center" prop="relationshipLessee" label="与出租方的关系"></el-table-column>-->
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`异常情况(${tableDataInfo.excelRowNumError})`" name="second">
                    <div style="margin-bottom: 5px">
                        <div  style="display: inline-block"><el-tag type="danger">异常提示</el-tag></div>
                        <div  style="display: inline-block;float: right;margin-bottom: 5px" >
                            <el-button type="primary" plain @click="exportExcleError">导出异常信息</el-button>
                        </div>
                    </div>
                    <el-table :data="tableWarnData"
                              show-header="false"
                              style="width: 100%;border-radius: 10px"
                              :header-cell-style="{'text-align':'center' }"
                              :row-style="{height:'35px'}"
                              :cell-style="{'text-align':'center', 'height':'22px'}">
                        <el-table-column prop="message" label="错误信息" ></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script src="./js/leading-in-table.js">
</script>
<style scoped lang="scss">
.leadingSecond{
    padding: 0 36px;
    /deep/ .el-tabs{
        .el-tabs__nav-wrap::after{
            background-color: #f5f5f5;
            height: 1px;
        }
        .el-tabs__item{
            font-size: 16px;
            padding: 10px 15px !important;
            height: auto;
        }
    }
    
    /deep/ .el-table{
        .el-table__header{
            border-color: #eee;
        }
        th,td{

        }
        th{
            background-color: #FAFAFA;
            border-color: #eee;
            font-size: 14px;
            color: #333;
            > .cell{
                padding-left: 10px;
            }
        } 
    }
}
</style>
